<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 数据劫持 底层是object.defineProperty
        Vue监视数据的原理：
1.Vue会监视data中所有层次的数据。
2.如何监测对象中的数据？
通过setter实现监视，且要在newVue时就传入要监测的数据。
（1）.对象中后追加的属性，Vue默认不做响应式处理
（2）.如需给后添加的属性做响应式，请使用如下API：
Vue.set（target，propertyName/index,value） 或
vm.$set(target,propertyName/index,value)
3。如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）.调用原生对应的方法对数组进行更新。
(2）.重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
    1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2.Vue.set（) 或vm.$set()
    3.特殊取巧的就是直接替换数组对象 array = filterArray
特别注意：Vue.set（)I和vm.$set（）不能给vm或vm的根数据对象添加属性！！！



        -->
       <div id="root">
            <h2>人员列表-遍历数组</h2>
           
            <div>computed实现</div>
            <ul>
                <li v-for="(p,key) in persons" :key="p.id">
                    {{p.name}}-{{p.age}}--{{key}}
                </li>
            </ul>
            <br/>
            <button @click="updateMei">更新mei</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el: '#root', 
                data(){
                    return {
                        persons:[
                            {id:'001',name:'马冬梅',age:1 ,sex:'女'},
                            {id:'002',name:'周冬雨',age:3,sex:'女'},
                            {id:'003',name:'周杰伦',age:4,sex:'男'},
                            {id:'004',name:'温兆伦',age:2,sex:'男'},
                        ],
                        keyWord:'',
                        sortType:0,
                    }
                },
                computed: {
                    
                },
                methods:{
                    updateMei(){
                        // this.persons[0].name='马冬梅-更新' //可以修改
                        // this.persons[0]={id:'001',name:'马冬梅-更新',}//vue检测不到5
                        this.persons.splice(0,1,{id:'001',name:'马冬梅-更新',})
                        // Vue.set(this.persons,0,{id:'001',name:'马冬梅-更新',} )
                    }
                }
            })
        </script>
    </body>
</html>
